<template>
  <div class="query-container">
    <p style="line-height: 12px; text-align: left; font-size: 20px; font-weight: bold;">
      理工教学楼
    </p>
    <p style="line-height: 12px; text-align: left; font-size: 15px; font-weight: bold;">
      点击某行可以跳转到详情
    </p>
    <!-- 查询参数 -->
    <el-form :inline="!isMobile" :label-width="isMobile ? '80px' : 'auto'">
      <el-form-item label="楼号">
        <el-input v-model="query.buildingId" clearable placeholder="请输入楼号"></el-input>
      </el-form-item>
      <el-form-item label="房间号">
        <el-input v-model="query.roomNumber" clearable placeholder="请输入房间号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>
      </el-form-item>
      <el-button type="primary" @click="dialogVisible = true">点击预览照片</el-button>
    </el-form>
    <!-- 对话框 -->
    <el-dialog v-model="dialogVisible" :width="isMobile ? '90%' : '50%'" title="照片预览">
      <img :src="imageUrl" alt="预览照片" style="width: 100%; height: auto"/>
    </el-dialog>
    <el-table v-if="!isMobile"
              :data="tableData"
              border
              class="table-page"
              style="width: 100%"
              @row-click="handleRowClick">
      <el-table-column align="center" class="tline" label="楼号" min-width="50" prop="buildingId"></el-table-column>
      <el-table-column align="center" class="tline" label="教学楼名称" min-width="150"
                       prop="buildingName"></el-table-column>
      <el-table-column align="center" class="tline" label="房间号" min-width="150" prop="roomNumber"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" class="tline" label="内容标题"
                       min-width="200" prop="contentTitle"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" class="tline" label="内容描述"
                       min-width="200" prop="contentDescription"></el-table-column>
      <el-table-column align="center" class="tline" label="作者" min-width="100" prop="contentAuthor"></el-table-column>
      <el-table-column align="center" class="tline" label="创建时间" min-width="180"
                       prop="contentCreateTime"></el-table-column>
    </el-table>
    <!-- 移动端卡片 -->
    <div v-else class="mobile-card-container">
      <div v-for="(item, index) in tableData" :key="index" class="mobile-card" @click="handleRowClick(item)">
        <div class="card-item">
          <span class="card-label">楼号:</span>
          <span class="card-value">{{ item.buildingId }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">房间号:</span>
          <span class="card-value">{{ item.roomNumber }}</span>
        </div>
        <div class="card-item">
          <span class="card-label">内容标题:</span>
          <span class="card-value card-text-ellipsis">{{ item.contentTitle }}</span>
        </div>
      </div>
    </div>
    <!-- 分页组件 -->
    <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    ></el-pagination>
  </div>


</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import axios from "axios";
import router from "@/router/index.ts";

// 查询参数
const query = ref({
  buildingId: null,
  roomNumber: null,
});
// 判断是否为移动端
const isMobile = ref(window.innerWidth < 768);
//监听窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768;
};
onMounted(() => {
  window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});


const dialogVisible = ref(false); // 控制对话框的显示与隐藏
const imageUrl = ref('https://web-tn9g.oss-cn-hangzhou.aliyuncs.com/cb258261-fd33-458c-9045-673717fb5c9e.jpg'); // 图片链接
// 表格数据
const tableData = ref([]);

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const previewImage = () => {
  dialogVisible.value = true; // 打开对话框
};
// 获取数据
const fetchData = async () => {
  try {
    const response = await axios.get("/teachingBuilding/page", {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        buildingId: query.value.buildingId,
        roomNumber: query.value.roomNumber,
      },
    });
    console.log(response.data.data.list)
    const data = response.data.data;
    tableData.value = data.list;
    total.value = data.total;
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 初始化加载数据
fetchData();

// 分页大小改变
const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  fetchData();
};

// 当前页码改变
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchData();
};

// 行点击事件
const handleRowClick = (row) => {
  // 假设contentId是表格数据中的一个字段
  const contentId = row.contentId;
  router.push({
    path: '/teachingBuildingDetail',
    query: {
      contentId: contentId,
    }
  })
};
</script>

<style scoped>
.query-container {
  padding: 20px;
}

.preview-button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 使用 >>> 穿透 scoped 限制 */
.tline >>> .cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-card-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.mobile-card {
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  line-height: 1.5;
  display: flex;
  gap: 10px; /* 卡片内元素间距 */
  overflow: hidden;
}

.card-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  margin-left: 10px;
}

.card-label {
  font-weight: bold;
  color: #606266;
}

.card-value {
  color: #303133;
  flex: 1; /* 值占据剩余空间 */
  min-width: 0; /* 防止 flex 子元素溢出 */
}

.card-text-ellipsis {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>